<template>
  <div class="full">
    <div class="head">
      <span style="margin-left:0px;">新增标签类别</span>
    </div>
    <div class="formc">
      <el-form :inline="true" ref="refform" :rules="rules" :model="state.pm" label-position="top" class="form">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <el-form-item label="标签类别名称" prop="tagCategoryName">
                  <el-input v-model="state.pm.tagCategoryName" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="标签状态" prop="state">
                  <el-select v-model="state.pm.state" placeholder="请选择" clearable>
                    <el-option label="停用" :value="1" />
                    <el-option label="启用" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述">
              <el-input type="textarea" v-model="state.pm.describe" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="标签样式" prop="icon">
              <el-checkbox-group v-model="state.pm.icon" :min="0" :max="1" @change="stchange">
                <el-checkbox :value="item.iconId" v-for="(item, index) in state.iconList" :key="index">
                  <template #default>
                    <div class="cuschk">
                      <img class="img" :src="item.icon" />
                    </div>
                  </template>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btns">
      <el-button class="cusb3" style="width:120px;" @click="emit('back')">取消</el-button>
      <el-button class="cusb2" style="width:120px;" @click="submit(refform)">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const state = reactive({
  pm: { iconId: '' },
  iconList: []
})
const emit = defineEmits(["back"]);
const refform = ref()
const rules = reactive({
  state: [{ required: true, message: '请选择', trigger: 'blur' }],
  tagCategoryName: [{ required: true, message: '请输入', trigger: 'blur' }],
  icon: [{ required: true, message: '请选择', trigger: 'blur' }],
})
const stchange = (val) => {
  console.log(val)
  if (val.length > 0) {
    state.pm.iconId = val[0]
  } else {
    state.pm.iconId = ''
  }
}
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if(state.pm.state==0){
        state.pm.tagCategoryState='启用'
      }else{
        state.pm.tagCategoryState='停用'
      }
      useApi.post("/arhome/system/tagcategory/handle", state.pm).then((res) => {
        emit('back')
      }).catch(err => {
        ElMessage.error(err.data.message)
      });
    } else {
      ElMessage.error('请完整填写信息')
    }
  })
}
const getData = () => {
  useApi.post("/arhome/getTagIcons", {}).then((res) => {
    state.iconList = res.data.iconList
  });
}
onMounted(() => {
  let store = useMyStore()
  state.pm = store.params.e2||{}
  if(state.pm.tagCategoryId){
    state.pm.optType='U'
    state.pm.icon = [state.pm.iconId]
  }else{
    state.pm.optType='A'
  }
  getData()
})
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 8px 0 30px;
  }
}

.formc {
  width: 100%;
  height: 500px;
  padding: 0 300px;
  margin-top: 20px;
  color: #ffffffc0;
  border-bottom: 1px solid #0F7BC4;
  border-image: linear-gradient(90deg, rgba(207, 245, 255, 0), rgba(233, 245, 255, 1), rgba(235, 251, 255, .8), rgba(163, 237, 255, 0)) 2 2;

  .form {
    display: flex;
    flex-direction: column;
    --el-color-danger: #ffffff;

    :deep(.el-form-item__label) {
      color: #ffffffc0;
    }
  }
}

.btns {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-checkbox) {
  width: 84px;
  height: 70px;
  margin: 5px;
  position: relative;
  background-image: url('/images/bgcheck.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &:hover {
    background-image: url('/images/bgcheckhot.png');
  }

  .el-checkbox__input {
    position: absolute;
    left: 5px;
    top: 5px;
  }

  .cuschk {
    width: 84px;
    height: 80px;
    margin-left: -9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 30px;
      height: 30px;
    }

    .txt {
      margin-top: 5px;
      font-weight: 600;
      font-size: 12px;
      color: #FFFFFFB4;
    }
  }
}

:deep(.el-select) {
  --el-input-text-color: #ffffffc0;

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-textarea) {
  --el-input-bg-color: #003D6399;
  --el-input-text-color: #ffffff;
}
</style>